<template>
    <div>
        <!--<el-carousel height="150px">
            <el-carousel-item>
                <el-link target="_blank">
                    <el-image :src="require('../assets/image/24_MothersDay_pc.jpg')" fit="contain"></el-image>                    
                </el-link>
            </el-carousel-item>
            <el-carousel-item>
                <el-link target="_blank">
                    <el-image :src="require('../assets/image/23_birthday_pc.jpg')" fit="contain"></el-image>
                </el-link>
            </el-carousel-item>
            <el-carousel-item>
                <el-link target="_blank">
                    <el-image :src="require('../assets/image/23_brand_banner_pc.jpg')" fit="contain"></el-image>
                </el-link>
            </el-carousel-item>                
        </el-carousel>-->   
        <el-carousel height="150px" v-if="isshow">
            <el-carousel-item v-for="item in images" :key="item">
                <el-link :href="item.courseUrl" target="_blank">
                    <el-image :src="require('../assets' + item.imageUrl)"></el-image>                    
                </el-link>
            </el-carousel-item>
        </el-carousel>      
    </div>
    <HomeCom></HomeCom>
</template>

<script>
import {ref, onMounted } from 'vue'
import { getBannersApi } from '../http/index'
import HomeCom from "../components/HomeCom.vue"
const images = ref();
const isshow = ref(false)  

export default {
    
    setup() {
         
        onMounted(async() => {
            images.value = (await getBannersApi()).data                     
            isshow.value = true
        })

        return { 
        
            images, 
            isshow 
        
        }
    },components:{
        HomeCom
    }

}
</script>

<style lang="scss">
.el-carousel__container {
    height: 480px !important;
    margin-top: 10px;
}
</style>